@font-face {
  font-family: TwitterChirpExtendedHeavy;
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}

@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff) format('woff');
  font-weight: 400;
  font-style: 'normal';
  font-display: 'swap';
}

@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff) format('woff');
  font-weight: 500;
  font-style: 'normal';
  font-display: 'swap';
}

@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff) format('woff');
  font-weight: 700;
  font-style: 'normal';
  font-display: 'swap';
}

@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #f54836;
  background-image: -webkit-linear-gradient(
                  45deg,
                  rgba(255, 255, 255, 0.2) 25%,
                  transparent 25%,
                  transparent 50%,
                  rgba(255, 255, 255, 0.2) 50%,
                  rgba(255, 255, 255, 0.2) 75%,
                  transparent 75%,
                  transparent
  );
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}

html, body {
  //滚动更丝滑
  scroll-behavior: smooth;
  box-sizing: border-box;
}

.app {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-family: 'TwitterChirp';
  display: grid;
  grid-template-columns: 1fr 4fr;
  //铺满屏幕消除滚动条
  position: absolute;
  top: 0px;
  left: 0px;
  //网格背景
  //background: #ffffff;
  //background-image: linear-gradient(rgba(232, 232, 232, 0.3) 1px, transparent 0),
  //linear-gradient(90deg, rgba(238, 238, 238, 0.3) 1px, transparent 0);
  //background-size: 10px 10px, 10px 10px;

  .headerColumn {
    user-select: none;
    min-width: 200px;
    position: relative;
    height: calc(100vh);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .main {
    box-sizing: border-box;
    width: 100%;
    .main-body {
      display: grid;
      grid-template-columns: 3fr 1fr 1fr;
      min-width: 375px;
    }
    .primaryColumn {
      box-sizing: border-box;
      border-right: 1px solid #eee;
      border-left: 1px solid #eee;
      position: relative;
    }
    .sidebarColumn {
      //height: calc(100vh);
      position: relative;
      box-sizing: border-box;
    }
  }
  .drawer-head {
    height: 100px;
    background-color: #9e2d2d;
    padding-top: 30px;
    position: relative;
    .header-box {
      position: relative!important;
    }
  }
}